<template>
  <div class="_home_name">Record</div>
  <div class="_his_table" v-show="!mobile">
    <div class="_his_tab_heard">
      <div>Item</div>
      <div>Time</div>
      <div>Buyer</div>
      <div>Seller</div>
      <div>Amount</div>
      <div>Fee</div>
      <div>View on BSCScan</div>
    </div>
    <div class="_his_tab_body" v-for="item in list" :key="item.txid">
      <div class="_his_tab_td">
        <div><img class="itemlogo" :src="item.image_url" /></div>
        <div>{{ _getTime(item.time) }}</div>
        <div>{{ _splitAddress(item.buyer) }}</div>
        <div>{{ _splitAddress(item.seller) }}</div>
        <div>{{ fromWei(item.amount) + _getUnit(item.currency) }}</div>
        <div>{{ fromWei(item.fee) + _getUnit(item.currency) }}</div>
        <div>
          <a :href="scanUrl + 'tx/' + item.txid" target="_blank">
            <img src="@/assets/scan.png" alt="" />
          </a>
        </div>
      </div>
    </div>
  </div>
  <div
    class="_mobile_his_tab_body"
    v-show="mobile"
    v-for="item in list"
    :key="item.txid"
  >
    <div class="_mobile_time_row">
      <label>{{ _getTime(item.time) }}</label>
    </div>
    <div class="mobil_item_row">
      <div class="mobile_item">Item</div>
      <img class="itemlogo_mobile" :src="item.image_url" />
    </div>
    <div>
      <label>Buyer</label>
      <h3>{{ _splitAddress(item.buyer) }}</h3>
    </div>
    <div>
      <label>Seller</label>
      <h3>{{ _splitAddress(item.seller) }}</h3>
    </div>
    <div>
      <label>Amount</label>
      <div>
        <label>
          {{ fromWei(item.amount) + _getUnit(item.currency)}}
        </label>
      </div>
    </div>
    <div>
      <label>Fee</label>
      <h3>{{ fromWei(item.fee) + _getUnit(item.currency)}}</h3>
    </div>
    <div class="_mobile_share">
      <label>View on BSCScan </label>
      <a :href="scanUrl + 'tx/' + item.txid" target="_blank">
        <img src="@/assets/scan.png" alt="" />
      </a>
    </div>
  </div>
</template>

<script>
import http from "../../http";
import { ref } from "vue";
import { scanUrl } from "../../dapp";
import { isMobile, onresizeLayout } from "../../common/util";
import { splitAddress } from "../../common/util";
import { CRA_ADDRESS, MGC_ADDRESS } from '../../abi';

export default {
  data() {
    return {
      scanUrl: scanUrl,
      list: [],
      mobile: document.body.clientWidth <= 750,
      page: 0,
    };
  },
  mounted() {
    console.log("lchmount");
    this.initData();
    let _this = this;
    window.onscroll = function () {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        //到了这个就可以进行业务逻辑加载后台数据了
        console.log("到了底部");
        _this.initData();
      }
    };
  },
  methods: {
    async initData() {
      this.page++;
      var res = await http.get(`api/trade-records?page=${this.page}&size=20`);
      if (res.code === 200) {
        this.list = this.list.concat(res.data ?? []);
      }
    },
    _getUnit( currency = '') {
      if(currency.toLocaleLowerCase() == MGC_ADDRESS.toLocaleLowerCase()) {
        return ' MGC'
      }
      if(currency.toLocaleLowerCase() == CRA_ADDRESS.toLocaleLowerCase()) {
        return ' CRA'
      }
    },
    _splitAddress(address) {
      return splitAddress(address);
    },
    _getTime(obj) {
      if (obj == null) {
        return null;
      }
      let date = new Date(obj);
      let y = 1900 + date.getYear();
      let m = "0" + (date.getMonth() + 1);
      let d = "0" + date.getDate();
      let h = "0" + date.getHours();
      let mm = "0" + date.getMinutes();
      let s = date.getSeconds();
      if (s.toString().length < 2) {
        s = "0" + s;
      }
      return (
        y +
        "-" +
        m.substring(m.length - 2, m.length) +
        "-" +
        d.substring(d.length - 2, d.length) +
        " " +
        h.substring(h.length - 2, h.length) +
        ":" +
        mm.substring(mm.length - 2, mm.length) +
        ":" +
        s
      );
    },
  },
};
</script>

<style scoped lang="scss">
.itemlogo {
  width: 70px;
  height: auto;
}
._home_name {
  font-size: 50px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #393939;
  text-align: center;
  margin-bottom: 30px;
}
._his_table {
  // margin-top: 61px;
}
._his_tab_heard {
  display: flex;
  align-items: center;
  padding: 16px 0;
  background-color: #fafafa;
  div {
    height: 22px;
    border-right: 1px solid #ebebeb;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #383838;
    width: 0;
    padding-left: 15px;
    &:nth-child(1) {
      flex-grow: 1;
    }
    &:nth-child(2) {
      flex-grow: 1;
    }
    &:nth-child(3) {
      flex-grow: 1;
    }
    &:nth-child(4) {
      flex-grow: 1;
    }
    &:nth-child(5) {
      flex-grow: 1;
    }
    &:nth-child(6) {
      flex-grow: 1;
    }
    &:nth-child(7) {
      flex-grow: 1;
    }
  }
}
._his_tab_body {
  min-height: 20px;
}
._his_tab_td {
  display: flex;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #f1f1f1;
  div {
    font-weight: 500;
    color: #383838;
    width: 0;
    padding-left: 15px;
    font-size: 13px;
    // text-align: center;
    padding-left: 15px;
    &:nth-child(1) {
      flex-grow: 1;
    }
    &:nth-child(2) {
      flex-grow: 1;
    }
    &:nth-child(3) {
      flex-grow: 1;
    }
    &:nth-child(4) {
      flex-grow: 1;
      color: #3a3a3a;
    }
    &:nth-child(5) {
      flex-grow: 1;
      color: #3a3a3a;
      display: flex;
      align-items: center;
    }
    &:nth-child(6) {
      flex-grow: 1;
      color: #3a3a3a;
      display: flex;
      align-items: center;
    }
     &:nth-child(7) {
      flex-grow: 1;
      color: #3a3a3a;
      display: flex;
      align-items: center;
    }
  }
}
._his_icon {
  width: 30px;
  height: 16px;
  margin-right: 9px;
  background: url("@/assets/c1.png") no-repeat center;
  background-size: cover;
}

%mobile_label {
  font-weight: 500;
  color: #949494;
  font-size: 13px;
}

._mobile_his_tab_body {
  background-color: #f1f1f1;
  padding-top: 5px;
  padding-bottom: 10px;
  margin-top: 20px;
  > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 10px 6px 10px;
    font-size: 16px;
    color: #383838;
    font-weight: 600;
    label {
      @extend %mobile_label;
    }
    h3 {
      @extend %mobile_label;
      color: #3a3a3a;
    }
    div {
      display: flex;
      flex-direction: row;
      align-items: center;
      img {
        width: 23;
        height: 15px;
      }
      label {
        @extend %mobile_label;
        color: #3a3a3a;
      }
    }
  }
  ._mobile_share {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 5px;
    label {
      margin-right: 10px;
    }
  }
}

._mobile_time_row {
  border-bottom: 1px solid #bbbbbb;
  // padding: 10px 0px 10px 0px;
  margin-bottom: 6px;
  label {
    margin-top: 5px;
    margin-bottom: 5px;
    @extend %mobile_label;
  }
}

.mobil_item_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile_item {
  color: #383838;
  font-size: 16px;
  font-weight: 600;
}
.itemlogo_mobile {
  width: 50px;
}
</style>
